<template>
  <div class="form form-readonly">
    <div class="group">
      <div class="label">编号</div>
      <div class="txt">{{ state.starinfo?.checkin1?.checkin_no }}</div>
    </div>
    <div class="group">
      <div class="label">姓名</div>
      <div class="txt">{{ state.starinfo?.star?.name }}</div>
    </div>
    <div class="group">
      <div class="label">年龄</div>
      <div class="txt">{{ state.starinfo?.register?.age }}岁</div>
    </div>
    <div class="group">
      <div class="label">身高</div>
      <div class="txt">{{ state.starinfo?.register?.height }}cm</div>
    </div>
    <div class="group">
      <div class="label">履历</div>
      <div class="txt">
        {{ state.starinfo?.register?.history }}
      </div>
    </div>
    <div class="group">
      <div class="label">现场照片</div>
      <div class="imgs">
        <img
          @click="imgShow"
          v-for="(item, index) in photos"
          :key="index"
          :src="item"
        />
      </div>
    </div>
    <div class="comment">
      <div class="tit">导演评语</div>
      <div class="radios">
        <label>
          <input
            :disabled="disabled"
            :checked="state.prtest_result == 1"
            type="radio"
            name="prtest_result"
            value="1"
            @change="radioChange"
          />
          <span>晋级</span>
        </label>
        <label>
          <input
            :disabled="disabled"
            :checked="state.prtest_result == 2"
            type="radio"
            name="prtest_result"
            value="2"
            @change="radioChange"
          />
          <span>待定</span>
        </label>
        <label>
          <input
            :disabled="disabled"
            :checked="state.prtest_result == 3"
            type="radio"
            name="prtest_result"
            value="3"
            @change="radioChange"
          />
          <span>TD</span>
        </label>
      </div>
      <textarea
        :disabled="disabled"
        class="textarea"
        name="prtest_say"
        placeholder="请输入评语..."
        v-model="state.prtest_say"
      ></textarea>
      <div class="tags">
        <template v-if="!disabled">
          <label v-for="(item, index) in state.tags" :key="index">
            <input type="checkbox" :value="item" @change="checkboxChange" />
            <span>{{ item }}</span>
          </label>
        </template>
        <template v-if="disabled">
          <label v-for="(item, index) in state.prtest_tags" :key="index">
            <input type="checkbox" checked disabled />
            <span>{{ item }}</span>
          </label>
        </template>
      </div>
    </div>
    <button class="submit" @click="submit" :disabled="disabled">确定</button>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import ajax from "../../util/http";
import { reactive, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const router = useRouter();
const route = useRoute();

const state = reactive({
  starinfo: {},
  tags: [],
  prtest_result: 0, //1：晋级，2：待定，3：淘汰
  prtest_say: "",
  prtest_tags: [],
});

ajax
  .post("/star/scene/oper_table", {
    token: JSON.parse(localStorage.getItem("userinfo")).token,
    checkin_no: route.query.checkin_no,
    checkin_stage: 1,
  })
  .then((res) => {
    if (res.code == 1) {
      state.starinfo = res.data;
      state.prtest_say = res.data.register.prtest_say;
      state.prtest_result = res.data.register.prtest_result;
      state.prtest_tags = res.data.register.prtest_tags
        ? res.data.register.prtest_tags.split("，")
        : [];
    }
  });

ajax.post("/star/scene/prtest_tags").then((res) => {
  if (res.code == 1) {
    state.tags = res.data;
  }
});

const photos = computed(() => {
  if (state.starinfo?.register?.prtest_photo) {
    return state.starinfo.register.prtest_photo.split(",");
  }
});

const disabled = computed(() => {
  if (state.starinfo?.register?.prtest_result) {
    return true;
  } else {
    return false;
  }
});

const radioChange = (e) => {
  state.prtest_result = e.target.value;
};

const checkboxChange = (e) => {
  if (e.target.checked) {
    if (!state.prtest_tags.includes(e.target.value)) {
      state.prtest_tags.push(e.target.value);
    }
  } else {
    state.prtest_tags.splice(
      state.prtest_tags.findIndex((item) => item == e.target.value),
      1
    );
  }
};

const imgShow = (e) => {
  proxy.$popup({
    img: e.target.getAttribute("src"),
  });
};

const submit = () => {
  if (!state.prtest_result) {
    proxy.$message({ content: "请选择初试结果" });
  } else if (!state.prtest_say) {
    proxy.$message({ content: "请输入评语" });
  } else {
    ajax
      .post("/star/scene/modi_table", {
        token: JSON.parse(localStorage.getItem("userinfo")).token,
        checkin_id: state.starinfo.checkin1.id,
        prtest_result: state.prtest_result,
        prtest_say: state.prtest_say,
        prtest_tags: state.prtest_tags.join("，"),
      })
      .then((res) => {
        if (res.code == 1) {
          router.push("/first/success");
        }
      });
  }
};
</script>